<template>
  <div>当前的求和值是{{sum}}</div>
  <button @click="sum++">点我++</button>
  <hr/>
  <h2>姓名：{{name}}</h2>
  <h2>年龄：{{age}}</h2>
  <h2>薪水：{{job.j1.salary}}</h2>
  <button type="button" @click="name += '-'">修改名字</button>
  <button type="button" @click="age++">修改年龄</button>
  <button type="button" @click="job.j1.salary++">修改年龄</button>
</template>

<script>
// import Vue from 'vue'
import { ref, reactive, toRef, toRefs, readonly, shallowReadonly } from 'vue'

export default {
  name: 'Demo',
  setup() {
    // let person = shallowReactive({
    let person = reactive({
      name: '张三',
      age: 20,
      job: {
        j1: {
          salary: 20
        }
      }
    })

    // person = readonly(person)
    person = shallowReadonly(person)

    // 使用toRefs对所有属性进行处理
    return {
      sum,
      ...toRefs(person)
    }
  }
}
</script>

<style>

</style>
